<template>
  <!-- 动态指令 -->
  <div v-bind:[attributeName]="d1"></div>
  <div :[attributeName]="d1"></div>
  <button @click="toggleColor">点击切换颜色</button>
  <button @[eventName]="toggleColor">点击切换颜色</button>

</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      msg: 'helloworld',
      eventName: 'click',
      attributeName:'class',
      d1:'d1'
    }
  },
  methods:{
    toggleColor(){
      this.attributeName = 'id'
    }
  }
}
</script>

<style>
#d1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.d1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>